/* eslint-disable no-undef */
import './index.css';

import img1 from './img/01.jpeg';
import img2 from './img/02.jpeg';
import img3 from './img/03.jpeg';
import img4 from './img/04.jpeg';
const arr = [img1, img2, img3, img4];
function Light($box) {
  // 装图片容器
  this.box = document.querySelector($box);
  this.arrowLeft = document.querySelector('.arrow-left');
  this.arrowRight = document.querySelector('.arrow-right');
  this.dotbox = document.querySelectorAll('.dot-box>span');
  console.log(this.dotbox);
  this.arrowLeft.innerHTML = '&gt;';
  this.arrowRight.innerHTML = '&gt;';

  // 初始值
  this.index = 1;
  this.timer;

  // 保留上一张图片
  this.lastIndex = 1;
}

// 初始化图片方法
Light.prototype.init = function () {
  console.log('初始化图片');
  this.img = new Image();
  this.img.draggable = false;
  this.img.src = `${arr[this.index - 1]}`;
  this.box.appendChild(this.img);
  //绑定下一张点击事件
  // this.arrowRightFn();
  // 轮播效果
  this.carousel();
};
// 点击给添加下一张图片
Light.prototype.arrowRightFn = function () {
  this.arrowRight.addEventListener('click', function () {
    console.log('下一张');
    this.index++;
    this.img.src = `${arr[this.index - 1]}`;
  });
};

// 轮播
Light.prototype.carousel = function () {
  Light.prototype.timer = setInterval(() => {
    this.index += 1;
    if (this.index > 4) {
      this.index = 1;
    }
    this.img.src = `${arr[this.index - 1]}`;
  }, 2000);
};

// dotbox.forEach((el, elIndex) => {
//   el.addEventListener("click", () => {
//     // 获取当前点击的小圆点下标, 更换index的值就就可以实现轮播图和小圆点下标一致
//     // eslint-disable-next-line no-undef
//     index = elIndex;
//     // 更改激活类名
//     changeActive();
//   });
// });

// eslint-disable-next-line no-unused-vars
function changeActive() {
  // 先移除上一张li的激活类名 li-active (当前激活对象更换了)
  // eslint-disable-next-line no-undef
  list[lastIndex].classList.remove('li-active');
  // 小圆点的激活类
  // eslint-disable-next-line no-undef
  dots[lastIndex].classList.remove('dot-active');

  // 更换激活对象
  list[index].classList.add('li-active');
  dots[index].classList.add('dot-active');

  // 更新上一次的值lastIndex
  lastIndex = index;
}

let a = new Light('.li-active');
a.init();
